<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="来源">
        <webQuerySource @source="sourceMethod"></webQuerySource>
      </el-form-item>
      <!-- <el-form-item>
        <el-switch v-model="isItemId" active-text="爱听歌曲id不为空" inactive-text="全部" @change="itemIdMethod"></el-switch>
      </el-form-item> -->
      <!--  <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item> -->
    </el-form>
    <el-table :data="list" height="640" border style="width: 100%;margin-top: -20px" @cell-mouse-enter="loadItemsMethod">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="items[`${props.row.list_id}_${props.row.url_source}`]" border style="width: 100%">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="song_id" label="歌曲ID"></el-table-column>
            <el-table-column prop="song_name" label="歌曲名"></el-table-column>
            <el-table-column prop="artist" label="歌曲名"></el-table-column>
            <el-table-column prop="album" label="专辑名"></el-table-column>
            <el-table-column prop="cp" label="唱片公司"></el-table-column>
            <el-table-column prop="exclusivity" label="付费方式"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="url_source" label="来源" width="80"></el-table-column>
      <el-table-column prop="list_name" label="标题"></el-table-column>
      <el-table-column prop="tag" label="标签" width="180"></el-table-column>
      <el-table-column prop="profile" label="简介"></el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="ps" @current-change="listMethod">
    </el-pagination>
  </div>
</template>
<script>
import apis from "@utils/apis";
import webQuerySource from "@comps/cms/WebQuerySource.vue";

export default {
  data() {
    return {
      pn: 1,
      ps: 1000,
      total: 0,
      source: 'all',
      list: [],
      items: {},
    }
  },

  components: {
    webQuerySource,
  },

  mounted() {
    this.listMethod()
  },

  methods: {
    listMethod(page) {
      let loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.pn = page || 1
      apis.matchSongListApi({
        pn: this.pn,
        ps: this.ps,
        source: this.source,
      }).then(res => {
        loading.close();
        this.total = res.result.total
        this.list = res.result.docs
        this.items = {}
      })
    },

    sourceMethod(source) {
      this.source = source
      this.listMethod()
    },

    loadItemsMethod(row, column, cell, event) {
      let itemKey = `${row.list_id}_${row.url_source}`
      if (!this.items[itemKey]) {
        apis.matchItemsApi({
          list_id: row.list_id,
          source: row.url_source,
        }).then(res => {
          this.items[itemKey] = res.result.docs
        })
      }
    },
  }
}

</script>
